<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>全国疫情实时监控 v3.2</title>
        <link rel="shortcut icon" href="./favicon.ico">
        <!-- Bootstrap@4.5.0 -->
        <link rel="stylesheet" href="./css/bootstrap.min.css" />
        <script src="./js/jquery-3.5.1.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <!-- wrtie -->
        <link rel="stylesheet" href="./css/index.css" />
        <script src="./js/index.js"></script>
        <!-- Echarts.js -->
        <script src="./js/echarts.min.js"></script>
        <script src="./js/china.js"></script>
    </head>

    <body>
        <div class="container-fluid">
            <!-- 头部 start -->
            <header class="header-container row text-center p-4">
                <div class="header-title col">全国疫情实时监控</div>
                <!-- <div class="header-time position-absolute">当前时间</div> -->
            </header>
            <!-- 头部 end -->
            <!-- 内容 start -->
            <section class="echart-content row text-center d-flex flex-row">
                <!-- 左列 start -->
                <div class="echart-left col-md">
                    <!-- 左1 start -->
                    <div class="left-chart-one position-relative m-1">
                        <div class="chart-header w-100"></div>
                        <div class="col h5">全国累计确诊省市</div>
                        <div class="left-chart-one-chart col h-75"></div>
                        <div class="chart-footer w-100"></div>
                    </div>
                    <!-- 左1 end -->

                    <!-- 左2 start -->
                    <div class="left-chart-two position-relative m-1">
                        <div class="chart-header w-100"></div>
                        <div class="col h5">全国累计趋势</div>
                        <div class="left-chart-two-chart col h-75"></div>
                        <div class="chart-footer w-100"></div>
                    </div>
                    <!-- 左2 end -->

                    <!-- 左3 start -->
                    <div class="left-chart-three position-relative m-1">
                        <div class="chart-header w-100"></div>
                        <div class="col h5">全国省市治愈 TOP10</div>
                        <div class="left-chart-three-chart col h-75"></div>
                        <div class="chart-footer w-100"></div>
                    </div>
                    <!-- 左3 end -->
                </div>
                <!-- 左列 end -->

                <!-- 中列 start -->
                <div class="echart-center col-md-5">
                    <!-- 中1 start -->
                    <div class="center-chart-one d-flex">
                        <div class="row w-100 pt-2 pb-2 align-items-center position-relative m-1">
                            <div class="chart-header w-100"></div>
                            <!-- 更新时间 -->
                            <div class="w-100 col align-items-end" style="color: whitesmoke;">更新时间：<span class="echart-time"></span></div>
                            
                            <div class="w-100"></div>
                            <div class="col">
                                <div class="wood-badge text-nowrap">
                                    <span class="badge badge-danger">新增</span>
                                    <small class="add-nowConfirm-number"></small>
                                </div>
                                <div class="wood-number nowConfirm-number"></div>
                                <div class="wood-text text-nowrap">
                                    现有确诊
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-nowrap">
                                    <span class="badge badge-danger">新增</span>
                                    <small class="add-noInfect-number"></small>
                                </div>
                                <div class="wood-number noInfect-number"></div>
                                <div class="wood-text text-nowrap">无症状</div>
                            </div>
                            <div class="col">
                                <div class="text-nowrap">
                                    <span class="badge badge-danger">新增</span>
                                    <small class="add-suspect-number"></small>
                                </div>
                                <div class="wood-number suspect-number"></div>
                                <div class="wood-text text-nowrap">
                                    现有疑似
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-nowrap">
                                    <span class="badge badge-danger">新增</span>
                                    <small class="add-nowSevere-number"></small>
                                </div>
                                <div class="wood-number nowSevere-number"></div>
                                <div class="wood-text text-nowrap">
                                    现有重症
                                </div>
                            </div>
                            <div class="w-100 m-2"></div>
                            <div class="col">
                                <div class="text-nowrap">
                                    <span class="badge badge-warning">新增</span>
                                    <small class="add-confirm-number"></small>
                                </div>
                                <div class="wood-number confirm-number"></div>
                                <div class="wood-text text-nowrap">
                                    累计确诊
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-nowrap">
                                    <span class="badge badge-warning">新增</span>
                                    <small class="add-importedCase-number"></small>
                                </div>
                                <div class="wood-number importedCase-number"></div>
                                <div class="wood-text text-nowrap">
                                    境外输入
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-nowrap">
                                    <span class="badge badge-warning">新增</span>
                                    <small class="add-heal-number"></small>
                                </div>
                                <div class="wood-number heal-number"></div>
                                <div class="wood-text text-nowrap">
                                    累计治愈
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-nowrap">
                                    <span class="badge badge-warning">新增</span>
                                    <small class="add-dead-number"></small>
                                </div>
                                <div class="wood-number dead-number"></div>
                                <div class="wood-text text-nowrap">
                                    累计死亡
                                </div>
                            </div>
                            <div class="chart-footer w-100"></div>
                        </div>
                    </div>
                    <!-- 中1 end -->

                    <!-- 中2 start -->
                    <div class="center-chart-two d-flex">
                        <div class="row w-100 align-items-center justify-content-center position-relative m-1">
                            <div class="chart-header w-100"></div>
                            <img class="center-chart-img-one" src="./images/map.png"></img>
                            <img class="center-chart-img-two" src="./images/lbx.png"></img>
                            <img class="center-chart-img-three" src="./images/jt.png"></img>
                            <div class="center-chart-map h-100 w-100"></div>
                            <div class="chart-footer w-100"></div>
                        </div>
                    </div>
                    <!-- 中2 end -->
                </div>
                <!-- 中列 end -->

                <!-- 右列 start -->
                <div class="echart-right col-md">
                    <!-- 右1 start -->
                    <div class="right-chart-one position-relative m-1">
                        <div class="chart-header w-100"></div>
                        <div class="col h5">全国治愈/病死趋势</div>
                        <div class="right-chart-one-chart col h-75"></div>
                        <div class="chart-footer w-100"></div>
                    </div>
                    <!-- 右1 end -->

                    <!-- 右2 start -->
                    <div class="right-chart-two position-relative m-1">
                        <div class="chart-header w-100"></div>
                        <div class="col h5">全国新增趋势</div>
                        <div class="right-chart-two-chart col h-75"></div>
                        <div class="chart-footer w-100"></div>
                    </div>
                    <!-- 右2 end -->

                    <!-- 右3 start -->
                    <div class="right-chart-three position-relative m-1">
                        <div class="chart-header w-100"></div>
                        <div class="col h5">境外输入省市 TOP10</div>
                        <div class="right-chart-three-chart col h-75"></div>
                        <div class="chart-footer w-100"></div>
                    </div>
                    <!-- 右3 end -->
                </div>
                <!-- 右列 start -->
            </section>
            <!-- 内容 end -->
        </div>
    </body>
</html>
